<!--
 * @Author: Cenven
 * @Date: 2021-06-26 14:00:43
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-09-29 15:36:46
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
    <div class='question_bank_card' @click="toPath(item.id)">
          <div class="question_cover">
              <img :src="(item && item.cover) || '/img/mobile/question_menus_subject.png'" alt="">
              <img v-if="item.isHot == 1" class="hot_img" src="/img/pc/question_bank_hot.png" alt="">
          </div>
          <div class="question_bottom">
              <p class="question_name">{{item.questionGroupName}}</p>
              <div class="question_price">
                  <template v-if="alreadyOwned">
                      <span class="price">已购买</span>
                  </template>
                  <template v-else>
                        <span v-if="isMemberFreeQuestion" class="price">会员免费</span>
                        <span v-else-if="item && item.isFree" class="price">免费</span>
                        <span v-else class="price">
                            <template v-if="item && isDiscount">
                                <span class="old_price">
                                        <span class="yen">￥</span><span>{{item && item.price}}<span v-if="item && item.effectiveTime">/{{ (item && item.effectiveTime) || "未知" }}年</span></span>
                                </span>
                                <span class="new_price">
                                        <span class="yen">￥</span><span>{{item && item.discountPrice}}<span v-if="item && item.effectiveTime">/{{ (item && item.effectiveTime) || "未知" }}年</span></span>
                                </span>
                            </template>
                            <template v-else>
                                <span class="yen">￥</span><span>{{item && item.price}}<span v-if="item && item.effectiveTime">/{{ (item && item.effectiveTime) || "未知" }}年</span></span>
                            </template>
                        </span>
                  </template>
                  
              </div>
              <div class="question_people">
                  <img src="/img/pc/hot.png" alt="">
                  <span class="student">{{item && item.studentSum}}人已购买</span>
              </div>
          </div>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
  export default {
    name:'question_bank_card',
    props: ["item"],
    components: {},
    data() {
    return {

    };
    },
    computed: {
        ...mapState({
            user_info(state) {
                return state.user_info;
            },
            token(state) {
                return state.token;
            },
            question_record_list(state){
                return state.questionBank.question_record_list;
            },
            kl_md(state) {
                return state.kl_md;
            },
            member_discount(state) {
                return state.member_discount;
            },
        }),
        alreadyOwned(){
            let index = this.question_record_list.findIndex(item=>{
                return item.id == this.item.id && item.deleted != 1
            })
            if(index != -1){
                return true;
            }
            return false;
        },
        isDiscount(){
            if(this.item.isDiscount == 1){
                let current_time = new Date().getTime();
                let discount_start_time = new Date(this.item.discountStartTime).getTime();
                let discount_end_time = new Date(this.item.discountEndTime).getTime();
                return discount_start_time <= current_time && current_time < discount_end_time;
            }else{
                return false;
            }
        },
        // 是否会员免费题库
        isMemberFreeQuestion(){
            if(Object.keys(this.member_discount).length > 0){
                const { deleted , questionGroupIds } = this.member_discount;
                return deleted == 0 && questionGroupIds.includes(this.item.id);
            }else{
                return false;
            }
        },
    },
    watch: {},
    methods: {
        toPath(id) {
            this.$router.push({
                path: "/question-detail",
                query: {
                id
                }
            });
        }
    },
    created() {
        
    },
    mounted() {
        
    },
  }
</script>

<style lang='scss' scoped>
.question_bank_card{
    width: 280px;
    height: 281px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-right: 18px;
    margin-bottom: 39px;
    cursor: pointer;
    .question_cover{
        width: 279px;
        height: 186.66px;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .hot_img{
            position: absolute;
            display: block;
            left: 0;
            top: 0;
            width: 70px;
            height: 60px;
        }
    }
    .question_bottom{
        padding: 14px;
        .question_name{
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            font-size: 20px;
            color: #3a3d42;
            font-weight: bold;
        }
        .question_price{
            text-align: right;
            .price{
                font-size: 20px;
                font-weight: bold;
                color: var(--theme-color);
                .old_price{
                    color: #a3a9b2;
                    text-decoration: line-through;
                    font-size: 16px;
                }
                .yen{
                    font-size: 14px;
                }
            }
        }
        .question_people{
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
                width: 20px;
                height: 20px;
                display: block;
            }
            .student{
                font-size: 12px;
                // font-weight: bold;
                color: #b7bdc7;
            }
        }
    }
}
</style>